<template>
  <a-row :gutter="24">
    <a-col :span="20">
      <a-radio-group type="button" v-model:model-value="theme">
        <a-radio class="radio" value="light">白天</a-radio>
        <a-radio class="radio" value="dark">黑暗</a-radio>
      </a-radio-group>
    </a-col>
    <a-col :span="4">
      <a-form-item>
        <a-button
          style="width: 100%"
          type="primary"
          status="success"
          size="medium"
          @click="getText(text)"
          >保存
        </a-button>
      </a-form-item>
    </a-col>
  </a-row>
  <div class="code-page">
    <MdEditor
      v-model="text"
      @onSave="getText(text)"
      v-bind:theme="theme"
      :codeTheme="'github'"
      :footers="footersRef"
    >
      <template #defFooters>
        <span>￥_￥</span>
        <span>{{ Date() }}</span>
      </template>
    </MdEditor>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { MdEditor } from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import message from "@arco-design/web-vue/es/message";

const text = ref("Hello world");

const theme = ref("dark");

const footersRef = ["markdownTotal", 0, "=", 1, "scrollSwitch"];

const saveText = () => {
  message.success("内容已保存");
};

// eslint-disable-next-line no-undef
defineProps(["getText"]);
</script>

<style>
.md-editor-toolbar-item:last-child {
  display: none;
}
</style>
